import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:ymApp/public.dart';

class ChannelPage extends StatefulWidget {
  static String routeName = 'channel';

  @override
  _ChannelPageState createState() => _ChannelPageState();
}

class _ChannelPageState extends State<ChannelPage> {
  TabController _tabController;
  String _textStr = '456';
  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      length: 2,
      vsync: ScrollableState()
    );
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    print('频道页构建中');
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        toolbarHeight: 120.rpx,
        title: Container(
          alignment: Alignment.center,
          child: Container(
            width: 300.rpx,
            child: TabBar(
              controller: _tabController,
              indicatorColor: Colors.pinkAccent,
              indicatorPadding: EdgeInsets.symmetric(horizontal: 30.rpx),
              indicatorWeight: 6.rpx,
              labelColor: Colors.pinkAccent,
              unselectedLabelColor: Colors.black,
              tabs: [
                Tab(
                  child: Container(
                    width: 80.rpx,
                    alignment: Alignment.center,
                    child: Text('频道',style: TextStyle(fontSize: 30.rpx,fontWeight: FontWeight.bold),),
                  ),
                ),
                Tab(
                  child: Container(
                    alignment: Alignment.center,
                    width: 100.rpx,
                    child: Text('分区',style: TextStyle(fontSize: 30.rpx,fontWeight: FontWeight.bold),),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          channelTabBarViewBuilder(),
          classifyTabBarViewBuilder(),
        ],
      ),
    );
  }

  Widget channelTabBarViewBuilder() {

    return Container(
      child: RefreshIndicator(
        onRefresh: () async {
          await Future.delayed(Duration(seconds: 3));
          setState((){
            _textStr = '123';
          });
        },
        child: ListView(
          children: [
            Padding(
              padding: EdgeInsets.all(15.rpx),
              child: Column(
                children: [
                  GestureDetector(
                    child: Container(
                      height: 66.rpx,
                      decoration: BoxDecoration(
                        color: Colors.black12,
                        borderRadius: BorderRadius.all(Radius.circular(100))
                      ),
                      child: Row(
                        children: [
                          SizedBox(width: 30.rpx,),
                          Icon(Icons.search,color: Colors.black45,),
                          Text('搜索你感兴趣的频道',style: TextStyle(color: Colors.black45),)
                        ],
                      ),
                    ),
                    onTap: (){
                      print('跳转搜索频道');
                    },
                  ),
                  Container(
                    margin: EdgeInsets.symmetric(vertical: 30.rpx),
                    child: Row(
                      children: [
                        Column(
                          children: [
                            CircleAvatar(
                              backgroundImage: NetworkImage('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1180991607,2645758304&fm=26&gp=0.jpg'),
                              radius: 40.rpx,
                            ),
                            SizedBox(height: 10.rpx,),
                            Text('全部频道'),
                          ],
                        ),
                        SizedBox(width: 30.rpx,),
                        Column(
                          children: [
                            CircleAvatar(
//                              backgroundImage: NetworkImage('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1180991607,2645758304&fm=26&gp=0.jpg'),
                              radius: 40.rpx,
                              child: Icon(Icons.add,size: 40.rpx,),
                            ),
                            SizedBox(height: 10.rpx,),
                            Text('添加订阅'),
                          ],
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
           Divider(
             thickness:20.rpx,
             color: Colors.black12,
           ),
           Padding(
             padding: EdgeInsets.all(20.rpx),
             child: Text('最近看过的频道'),
           ),
           Container(
             height: 300.rpx,
             child: ListView(
               padding:  EdgeInsets.symmetric(vertical: 10.rpx),
               scrollDirection: Axis.horizontal,
               children: List.generate(10, (index) => watchedChannel(index))
             ),
           ),
            Divider(
              thickness:20.rpx,
              color: Colors.black12,
            ),
            Padding(
              padding: EdgeInsets.all(20.rpx),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('热门频道'),
                  Row(
                    children: [
                      Text('换一换'),
                      Icon(Icons.refresh)
                    ],
                  )
                ],
              ),
            ),
            Container(
              height: 200.rpx,
              child: ListView(
                  padding:  EdgeInsets.symmetric(vertical: 10.rpx),
                  scrollDirection: Axis.horizontal,
                  children: List.generate(5, (index) => hotChannel(index))
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(horizontal: 20.rpx),
              height: 120.rpx,
              width: double.infinity,
              decoration: BoxDecoration(
                color: Colors.black12,
                borderRadius: BorderRadius.all(Radius.circular(6.rpx))
              ),
              child: channelSwiperBuilder(),
            ),
            Container(
              padding: EdgeInsets.all(20.rpx),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('搞笑',style: TextStyle(fontSize: 30.rpx,fontWeight: FontWeight.bold),),
                          Text('1分钟前更新',style: TextStyle(color: Colors.black45),)
                        ],
                      ),
                      Container(
                        width: 200.rpx,
                        height: 60.rpx,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          border: Border.all(width: 2.rpx,color: Colors.pinkAccent),
                          borderRadius: BorderRadius.all(Radius.circular(8.rpx))
                        ),
                        child: Text('201.4万 订阅',style: TextStyle(color: Colors.pinkAccent, fontSize: 20.rpx),),
                      )
                    ],
                  ),
                  Row(
                    children: [
                      channelVideoItemBuilder(),
                      SizedBox(width: 30.rpx),
                      channelVideoItemBuilder()
                    ],
                  ),
                  Container(
                    alignment: Alignment.centerLeft,
                    child: Text('精选视频3.7万个 >',style: TextStyle(color: Colors.black45),),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget channelVideoItemBuilder() {
    return Column(
      children: [
        Container(
          height: 200.rpx,
          width: 340.rpx,
          margin: EdgeInsets.symmetric(vertical: 10.rpx),
          child: Stack(
            fit: StackFit.expand,
            children: [
              ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(10.rpx)),
                child: Container(
                  child: Image.network('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3557543371,89408500&fm=26&gp=0.jpg',fit: BoxFit.cover,),
                ),
              )
            ],
          ),
        ),
        Container(
          width: 340.rpx,
          alignment: Alignment.centerLeft,
          child: Text('[沙雕图92]网上超级搞笑的沙雕图第二十九弹',style: TextStyle(fontSize: 22.rpx)),
        )
      ],
    );
  }
  Widget channelSwiperBuilder() {
    return Swiper(
      scrollDirection: Axis.vertical,
      itemCount: 4,
      autoplay: true,
      autoplayDelay: 6000,
      itemBuilder: (context, index){
        return Padding(
          padding: EdgeInsets.symmetric(horizontal: 20.rpx,vertical: 20.rpx),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  CircleAvatar(radius: 36.rpx,),
                  SizedBox(width: 20.rpx,),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('林心如',style: TextStyle(fontWeight: FontWeight.bold,fontSize: 26.rpx),),
                      Text('新增精选【辣目样子】辣眼睛版',style: TextStyle(color: Colors.black45,fontSize: 20.rpx),)
                    ],
                  ),
                ],
              ),
              Container(
                height: 60.rpx,
                width: 150.rpx,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    color: Colors.pinkAccent,
                    borderRadius: BorderRadius.all(Radius.circular(10.rpx))
                ),
                child: Text('去看看',style: TextStyle(color: Colors.white,fontSize: 22.rpx),),
              )
            ],
          ),
        );
      },

    );
  }

  Widget hotChannel(int index) {
    return Container(
      width: 146.rpx,
      padding: EdgeInsets.symmetric(horizontal: 20.rpx),
      child: Column(
        children: [
          CircleAvatar(backgroundImage: NetworkImage('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1180991607,2645758304&fm=26&gp=0.jpg'),radius: 40.rpx,),
          SizedBox(height: 15.rpx,),
          Text('搞笑'),
        ],
      ),
    );
  }

  Widget watchedChannel(int index) {
    return Container(
      width: 200.rpx,
      height: 280.rpx,
      margin: index==9? EdgeInsets.symmetric(horizontal: 20.rpx):EdgeInsets.only(left: 20.rpx),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(6.rpx)),
          boxShadow: [
            BoxShadow()
          ]
      ),
      child: Stack(
        fit: StackFit.expand,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ClipRRect(
                  borderRadius: BorderRadius.only(topLeft: Radius.circular(10.rpx),topRight: Radius.circular(10.rpx)),
                  child: AspectRatio(
                    aspectRatio: 2/1,
                    child: Image.network('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1180991607,2645758304&fm=26&gp=0.jpg',fit:BoxFit.cover,),
                  )
              ),
              SizedBox(height: 50.rpx,),
              Expanded(
                child: Container(
                  child: Column(
                    children: [
                      Text('搞笑',style: TextStyle(fontWeight: FontWeight.bold,fontSize: 22.rpx),),
                      Text('看过该频道的视频',style: TextStyle(color: Colors.black45,fontSize: 22.rpx),textAlign: TextAlign.center,)
                    ],
                  ),
                ),
              )
            ],
          ),
          Positioned(
            top: 60.rpx,
            left: 60.rpx,
            child: CircleAvatar(radius: 40.rpx,backgroundImage: NetworkImage('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1180991607,2645758304&fm=26&gp=0.jpg'),),
          ),

        ],
      ),
    );

  }

  Widget classifyTabBarViewBuilder() {
    return GridView.builder(
        itemCount: 10,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          childAspectRatio: 1,
          mainAxisSpacing: 1.rpx,
          crossAxisSpacing: 1.rpx
        ),
        itemBuilder: (context, index){
          return Container(
            child: InkWell(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.live_tv,size: 50.rpx,),
                  SizedBox(height: 20.rpx,),
                  Text('番剧')
                ],
              ),
            ),
          );
        }
    );
  }

  Future _handlerRefresh() async {
    await Future.delayed(Duration(seconds: 3));
    setState(() {
       this._textStr = '123';
    });
  }
}

